<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax的使用</title>
</head>
<body>
  <h1 class="btn">首页</h1>
  <button>获取数据</button>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
    // import axios from "axios"
    document.getElementsByTagName("button")[0].onclick = function(){
      // let xhr = new XMLHttpRequest();
      // // 规定请求类型
      // xhr.open('get', './index.json');
      // // 发送请求
      // xhr.send();
      // // 监听readdyState事件
      // xhr.onreadystatechange = function(){
      //   /*** 
      //    * 0：请求未初始化
      //    * 1：服务器连接已建立
      //    * 2：请求以接收
      //    * 3：请求处理中
      //    * 4：请求已完成，且相应就绪
      //    * 
      //   */
      //   if(xhr.readyState === 4 && xhr.status === 200){
      //     alert(xhr.responseText);
      //   }
      // }

    
    console.log(axios);

     var data = myAjax('get', './index.json').then((item) =>{
      alert(item)
     });
     console.log(data);
    }

    function myAjax(method, url){
      return new Promise(function(resolve){
        let xhr = new XMLHttpRequest();
        // 规定请求类型
        xhr.open(method, url);
        // 发送请求
        xhr.send();
        // 监听readdyState事件
        xhr.onreadystatechange = function(){
          if(xhr.readyState === 4 && xhr.status === 200){
            resolve(xhr.responseText);
            
          }
        }
      })
      
    }

    // 使用fetch 请求数据
    console.log("-----------------------")
    // let wtf = fetch("https://www.escook.cn/api/cart");
    // console.log(wtf);
    // get的请求
    fetch("https://www.escook.cn/api/cart")
      .then((remote) =>{
        console.log(remote.json());
      })
      .then((data) => {
        console.log("这是fetch方法", JSON.stringify(data));
      })
    


    // $('.btn').click(function(){
    //   $.ajax({
    //     url: 'https://www.escook.cn/api/cart',
    //     type: 'get'
    //   }).done( res => {
    //     console.log(res);
    //   })
    // })
    
    
    /***
     * jquery 封装的ajaxd使用
     * */ 
    $.ajax({
      url: 'https://www.escook.cn/api/cart',
      type: 'get'
    }).done( res => {
      console.log(res);
    })

    $.ajax({
      url: "http://www.liulongbin.top:3006/api/getbooks",
      type: "get",
      success: (res) => {
        console.log("这是$.ajax方法",res);
      }
    })

    $.get("http://www.liulongbin.top:3006/api/getbooks", function(res){
      console.log("这是$.get方法", res);
    })

    $.post("http://www.liulongbin.top:3006/api/getbooks", {} ,(res) => {
      console.log("这是$.post方法请求", res);
    })



    function Vue(options){
      var _data = options.data(),
          _this = this;
      
      for(var k in _data){
        // (function(k){
        //   Object.defineProperty(_this, k, {
        //     get(){
        //       console.log('GEt' + k);
        //       return _data[k];
        //     },
        //     set(newValue){
        //       console.log('SET' + k);
        //       _data[k] = newValue;
        //     }
        //   })
        // })(k)


        _this.__defineGetter__(k, function(){
          console.log("GET defineGetter: " + k);
          return _data[k];
        })

        _this.__defineSetter__(k, function(newValue){
          console.log("SET defineGetter: " + k);
          _data[k] = newValue;
        })
      }
    }

    var vm = new Vue({
      data: function(){
        return {
          a: 1,
          b: 2
        }
      }
    });

    console.log(vm);
    





    

  </script>
</body>
</html>